<html>
  <head>
    <title>heatmap</title>
	<style>
		body{
			margin: 0;
			padding: 0;
		}
		.example-1{
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin: auto;
		}
	</style>
  </head>
  <body>
	  
	<div class="example-1" style="border:1px red solid;"></div>

  <script src="js/heatmap.min.js"></script>
  <script>
	  
	  //页面加载完成，回调Android的方法
	  function callback(msg){
	  	androidObj.jsCallback(msg);
	  };
	  
      window.onload = function() {
		//画布宽高
		var w = document.body.scrollWidth - 2;
		var h = document.body.scrollHeight - 2;
		callback("w:" + w + ", h:" + h);
		
        var ex1el = document.querySelector('.example-1');
		//设置画布大小
		ex1el.style.width = w + "px";
		ex1el.style.height = h + "px";
		//初始化画布
		h337.defaultRadius = 40;
        var heatmap1 = h337.create({
          container: ex1el
        });
		
		//随机生成数据
        var refreshHeatmap1 = function() {
          var data1 = {};
          var datap1 = [];
          var max1 = 0;
          var l = 600;
          while(l--) {
            var val = Math.random()*10;
            var d = {
              x: Math.floor(Math.random()*w),
              y: Math.floor(Math.random()*h),
              value: val
            };
            datap1.push(d);
          }
          data1["max"] = max1;
          data1["data"] = datap1;
          heatmap1.setData(data1);
        }; 

        //refreshHeatmap1();
		
        ex1el.onclick = function() {
			refreshHeatmap1();
        };
		
		callback("全部加载完成！");
      };

    </script>
  </body>

</html>